<template>
  <el-tag class="status" :color="statusColorMap[status]">
    {{ configStore.userStatusLabelMap[status] }}
  </el-tag>
</template>

<script setup lang="ts">
import { useConfigStore } from '@/stores'
import type { ConfigUserStatusValueType } from '@/types/api'

defineProps<{ status: ConfigUserStatusValueType }>()

const statusColorMap = {
  All: '#909399',
  Active: '#409eff',
  Pending: '#e6a23c',
  Banned: '#f56c6c',
  Rejected: '#f56c6c'
}

const configStore = useConfigStore()
</script>

<style scoped lang="scss">
.status {
  --el-tag-text-color: white;
}
</style>
